<template>
	<div class="container">
		<div class="circle">
			<div class="circle_left ab" :style="renderLeftRate(85)"></div>
			<div class="circle_right ab" :style="renderRightRate(85)"></div>
			<div class="circle_text">
				<span class="name">成功率</span>
				<span class="value">85%</span>
			</div>
		</div>
		<button @click="scal += 10">{{ scal }} ++</button>
		<button @click="scal -= 10">{{ scal }} --</button>
		<div class="circle1">
			<div class="circle1_left ab" :style="renderLeftRate(scal)"></div>
			<div class="circle1_right ab" :style="renderRightRate(scal)"></div>
		</div>
		<h1>svg实现</h1>
		<div>
			<span>百分比</span>
			<button @click="num += 5">加</button>
			<button @click="num -= 5">减</button>
		</div>
		<br />
		<div>
			<span>半径</span>
			<button @click="radius += 10">加</button>
			<button @click="radius -= 10">减</button>
		</div>
		<ProgressSvg :value="num" :radius="radius" color="#0088FF" background="gainsboro"></ProgressSvg>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import ProgressSvg from './ProgressSvg.vue';
const scal = ref(10)
const num = ref(10)
const radius = ref(70)
const renderRightRate = (rate) => {
	if (rate < 50) {
		return 'transform: rotate(' + 3.6 * rate + 'deg);';
	} else {
		return 'transform: rotate(0);border-color: #54c4fd;';
	}
};

const renderLeftRate = (rate) => {
	if (rate >= 50) {
		return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);';
	}
};
</script>
<style lang='less' scoped>
.container {
	color: #fff;
	height: 100%;
	background: #333;

	.circle {
		width: 80px;
		height: 80px;
		position: relative;
		border-radius: 50%;
		left: 200px;
		top: 50px;
		box-shadow: inset 0 0 0 5px #54c4fd;

		.ab {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
		}

		&_left {
			border: 5px solid #546063;
			border-radius: 50%;
			clip: rect(0, 40px, 80px, 0);
		}

		&_right {
			border: 5px solid #546063;
			border-radius: 50%;
			clip: rect(0, 80px, 80px, 40px);
		}

		&_text {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #fff;

			.name {
				margin-bottom: 4px;
			}
		}
	}

	.circle1 {
		margin-top: 20px;
		width: 80px;
		height: 80px;
		position: relative;
		border-radius: 50%;
		left: 200px;
		top: 50px;
		box-shadow: inset 0 0 0 10px #54c4fd;

		.ab {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			border: 10px solid #546063;
			border-radius: 50%;
		}

		&_left {
			clip: rect(0, 40px, 80px, 0);
		}

		&_right {
			clip: rect(0, 80px, 80px, 40px);
		}
	}
}
</style>
